<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	
	
	<body>
		<div id="app">
			<hello-com></hello-com>
			<hello-com2></hello-com2>
		</div>
		
		
		<!-- 组件绑定 -->
		<template id="helloTemp2">
			<div>
				<h1>{{message}}</h1>
			</div>
		</template>
		
		<template  id="helloTemp">
			<div>
				<h3>{{message}}</h3>
			</div>
		</template>
		
		<script src="../js/vue.js"></script>
		<script>
			//定义一个对象
			let  hello1={
				 data(){
				 	return  {
				 		message: "我是hello1"
				 	}
				 },
				 template: "#helloTemp"
			}
			
			let  hello2={
				data(){
					return  {
						message: "我是hello2",
					}
				},
				template: "#helloTemp2"
				
			}
			
			
			
			const  app=new  Vue({
				el: "#app",
				components: {
					//定义局部的组件
					helloCom: hello1,
					helloCom2: hello2
					
				}
			})	
				 
		</script>
		
		
		
		
		
		
	</body>
</html>
